<template>
  <div class="city">
    <MyHead
      :title="'城市选择' + ($route.query.name ? '-' + $route.query.name : '')"
      :show="true"
    ></MyHead>
    <van-index-bar class="van-index-bar">
      <div v-for="(l, i) in list" :key="i">
        <van-index-anchor :index="l">
          <van-cell
            @click="chooseCity(city)"
            :title="city.name"
            v-for="(city, j) in cityList.filter(
              (item) => item.pinyin.indexOf(l.toLowerCase()) == '0'
            )"
            :key="j"
          >
          </van-cell>
        </van-index-anchor>
      </div>
    </van-index-bar>
  </div>
</template>



<script>
export default {
  name: "city",
  data() {
    return {
      cityList: [],
      list: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "W",
        "X",
        "Y",
        "Z",
      ],
    };
  },
  created() {
    console.log("$router", this.$router);
    this.$ajax
      .getmaizuodata(
        {},
        {
          "X-Host": "mall.film-ticket.city.list",
        }
      )
      .then((res) => {
        if (res.code == 200) {
          this.cityList = res.result.data.cities;
        }
      });
  },
  // mounted() {
  //   console.log("$router",this.$router);
  //   this.$ajax
  //     .getmaizuodata(
  //       {},
  //       {
  //         "X-Host": "mall.film-ticket.city.list",
  //       }
  //     )
  //     .then((res) => {
  //       if (res.code == 200) {
  //         this.cityList = res.result.data.cities;
  //       }
  //     });
  // },
  methods: {
    chooseCity(city) {
      this.changeCityInfo(city);
      console.log(city);
      this.$router.go(-1);
    },
  },
};
</script>


<style lang="scss" scoped>
.van-index-bar {
  height: 100%;
  overflow: auto;
}
.city {
  padding-bottom: 0;
}
</style>